<template>
  <view class="lottery mx-20px py-20px relative">
    <view class="lotteryBg w-full h-full absolute top-0px bg-white">
      <!-- <image src="https://e.zgxhcs.net/images/bg.png" mode="center" class="w-full h-full"></image> -->
    </view>
    <view class="w-full flex flex-y flex-y-center relative">
      <image
        src="/pagesPoster/static/leafLet/title2.png"
        mode=""
        class="w-400px h-100px ml-15px"
      ></image>
      <image
        style="margin-top: 10rpx"
        src="https://e.zgxhcs.net/images/choujiang.png"
        mode=""
        class="w-510px h-84px"
      ></image>
    </view>
    <view class="wrap h-730px relative">
      <view class="wrapBg w-full h-full px-20px absolute top-0px border-box">
        <image
          src="/pagesPoster/static/leafLet/wrap.png"
          mode=""
          class="w-full h-full"
        ></image>
      </view>
      <view class="animateBg w-full h-full absolute">
        <view class="start start1 absolute">
          <image
            src="/pagesPoster/static/leafLet/start01.png"
            mode=""
            class="w-54px h-38px"
          ></image>
        </view>
        <view class="start start2 absolute">
          <image
            src="/pagesPoster/static/leafLet/start02.png"
            mode=""
            class="w-38px h-44px"
          ></image>
        </view>
        <view class="start start3 absolute">
          <image
            src="/pagesPoster/static/leafLet/start03.png"
            mode=""
            class="w-34px h-48px"
          ></image>
        </view>
        <view class="start start4 absolute">
          <image
            src="/pagesPoster/static/leafLet/start04.png"
            mode=""
            class="w-40px h-56px"
          ></image>
        </view>
        <view class="start start5 absolute">
          <image
            src="/pagesPoster/static/leafLet/start05.png"
            mode=""
            class="w-38px h-56px"
          ></image>
        </view>
      </view>
      <view class="h-560px flex flex-x-center relative">
        <view
          class="luckyGrid-box w-595px h-350px mt-170px"
          :class="state.bdStyle"
        >
          <kong-swiper
            class="swiper relative"
            :swiperList="state.prizes"
            next-margin="150rpx"
            previous-margin="150rpx"
            space-between="20rpx"
            :scale="0.8"
            circular
            :current="state.activeIndex"
            :autoplay="!state.endStatus"
            :duration="250"
          >
            <template v-slot:default="{ swiperItem, swiperCurrent }">
              <view
                class="item w-300px h-200px mt-60px flex flex-y flex-y-center"
              >
                <image
                  class="img"
                  :src="swiperItem?.icon"
                  mode="aspectFit"
                ></image>
                <text>{{ swiperItem?.label }}</text>
              </view>
            </template>
          </kong-swiper>
          <view class="absolute bottom-10px left-215px">
            <image
              src="https://e.zgxhcs.net/images/dengzhao.png"
              mode=""
              class="w-280px h-343px"
            ></image>
          </view>
          <!-- <LotteryBack :state="state" :current='state.activeIndex' :autoplay="!state.endStatus"></LotteryBack> -->
        </view>
      </view>
      <view class="mx-50px mt-30px flex flex-x-between flex-y-center relative">
        <image
          src="/pagesPoster/static/leafLet/icon-04.png"
          mode=""
          class="w-100px h-100px"
          @click="showListHandle(0)"
        >
        </image>
        <image
          src="/pagesPoster/static/leafLet/btn.png"
          mode=""
          v-if="!state.startStatus"
          class="w-300px h-100px"
          @click="start"
        ></image>
        <image
          src="/pagesPoster/static/leafLet/lottery-pending.png"
          v-if="state.startStatus"
          mode="widthFix"
          class="w-300px h-100px"
        ></image>
        <image
          src="/pagesPoster/static/leafLet/icon-05.png"
          mode=""
          class="w-100px h-100px"
          @click="showListHandle(1)"
        >
        </image>
      </view>

      <uv-popup
        ref="jpListPopup"
        mode="center"
        custom-style=""
        bgColor="none"
        overlayOpacity="0.7"
      >
        <view class="jpListPopup pt-160px mb-100px flex flex-x-center">
          <view class="title absolute">
            <image
              src="https://e.zgxhcs.net/images/bg-03.png"
              mode=""
              class="w-180px h-248px"
            ></image>
          </view>
          <view class="close absolute" @click="closeListHandle">
            <image
              src="/pagesPoster/static/leafLet/close.png"
              mode=""
              class="w-60px h-60px"
            ></image>
          </view>
          <view class="content p-30px rounded-30px flex flex-wrap">
            <template v-if="!state.popupState">
              <view class="w-600px h-300px">
                <view class="text-center">活动规则</view>
                <view class="mt-20px">
                  邀请好友报名成功才可以参与抽奖
                  <!-- <text class="color-pink">幸运大抽奖</text>一次 -->
                </view>
              </view>
            </template>
            <template v-else>
              <view
                v-for="(item, index) in state.prizes"
                :key="item.code"
                class="w-1-3 mb-40px flex flex-y flex-x-center flex-y-center"
              >
                <image
                  :src="item?.icon"
                  mode=""
                  class="w-100px h-100px"
                ></image>
                <text>{{ item?.label }}</text>
              </view>
            </template>
          </view>
        </view>
      </uv-popup>

      <uv-popup
        ref="winningPopup"
        mode="center"
        custom-style=""
        bgColor="none"
        overlayOpacity="0.7"
        :closeOnClickOverlay="false"
      >
        <view class="winningPopup pt-160px mb-100px flex flex-x-center">
          <view class="title absolute">
            <image
              src="/pagesPoster/static/leafLet/win.png"
              mode=""
              class="w-390px h-170px"
            ></image>
            <text class="absolute w-130px left-140px top-70px color-white"
              >恭喜中奖</text
            >
          </view>
          <view class="close absolute" @click="closeWinningHandle">
            <image
              src="/pagesPoster/static/leafLet/close.png"
              mode=""
              class="w-60px h-60px"
            ></image>
          </view>
          <view class="content p-20px rounded-30px flex flex-wrap">
            <template v-if="state.winningType == 1">
              <view class="w-600px">
                <view class="flex flex-y-center flex-x-center">
                  <image
                    :src="state.prizes[state.activeIndex]?.icon"
                    mode=""
                    class="w-80px h-80px"
                  >
                  </image>
                  <view class="ml-10px text-center color-pink">
                    {{ state.prizes[state.activeIndex]?.label }}
                  </view>
                </view>
                <view class="mt-20px color-999 text-24px">
                  * 请填写您的收件信息,以便收到奖品
                </view>
                <view class="mt-20px">
                  <view
                    class="border flex flex-y-center py-10px mb-30px rounded-50px"
                  >
                    <view class="w-100px text-28px text-center">姓名:</view>
                    <view class="line mr-20px mt-2px"></view>
                    <view class="flex-1">
                      <uv-input
                        v-model="state.userName"
                        border="none"
                        placeholder="请输入姓名"
                        class="rounded-20px"
                      >
                      </uv-input>
                    </view>
                  </view>

                  <view
                    class="border flex flex-y-center py-10px mb-30px rounded-50px"
                  >
                    <view class="w-100px text-28px text-center">电话:</view>
                    <view class="line mr-20px mt-2px"></view>
                    <view class="flex-1">
                      <uv-input
                        v-model="state.phone"
                        border="none"
                        placeholder="请输入电话"
                        class="rounded-20px"
                      >
                      </uv-input>
                    </view>
                  </view>
                  <!-- 三级联动地址 -->
                  <view
                    class="border flex flex-y-center py-10px mb-30px rounded-50px"
                  >
                    <view class="w-100px text-28px text-center">地区:</view>
                    <view class="line mr-20px mt-2px"></view>
                    <view class="flex-1" @click="openPicker">
                      <uv-input
                        v-model="state.moreAddress"
                        readonly
                        border="none"
                        placeholder="请选择省市区"
                        class="rounded-20px"
                      >
                      </uv-input>
                    </view>
                  </view>
                  <view
                    class="border flex flex-y-center py-10px mb-30px rounded-50px"
                  >
                    <view class="w-100px text-28px text-center">地址:</view>
                    <view class="line mr-20px mt-2px"></view>
                    <view class="flex-1">
                      <uv-input
                        v-model="state.address"
                        border="none"
                        placeholder="请输入收件地址"
                        class="rounded-20px"
                      >
                      </uv-input>
                    </view>
                  </view>
                </view>

                <view class="flex flex-x-center">
                  <view
                    class="winningBtn px-60px py-15px rounded-50px color-white"
                    @click="submitReceiving"
                  >
                    确 定
                  </view>
                </view>
              </view>
            </template>
            <template v-else>
              <view
                class="w-500px mb-40px flex flex-y flex-x-center flex-y-center"
              >
                <view class="flex flex-y-center flex-x-center">
                  <image
                    :src="state.prizes[state.activeIndex]?.alertPhoto"
                    mode=""
                    class="w-80px h-80px"
                  >
                  </image>
                  <view class="ml-10px text-center color-pink">
                    {{ state.prizes[state.activeIndex]?.label }}
                  </view>
                </view>
                <!-- <view class="my-20px color-999 text-24px">
									* 添加客户微信,以便兑换奖品
								</view> -->
                <!-- <uv-qrcode ref="qrcode" size="200px" value="https://h5.uvui.cn"></uv-qrcode> -->
                <image
                  @longpress="longpress"
                  :src="state.prizes[state.activeIndex]?.alertPhoto"
                  mode=""
                  class="w-430px h-440px"
                >
                </image>
                <!-- <image @longpress='longpress' src="https://e.zgxhcs.net/images/cash.gif" mode=""
									class="w-430px h-440px">
								</image> -->
              </view>
            </template>
          </view>
        </view>
      </uv-popup>
      <uv-notify ref="notify"></uv-notify>

      <uv-modal
        ref="modalNoNum"
        title="提示"
        content="您没有可用的抽奖次数"
        align="center"
      ></uv-modal>
    </view>

    <view class="recommend p-20px mx-20px mt-30px rounded-20px relative">
      <view class="title leading-70px text-36px font-bold relative">
        获得更多抽奖次数
        <image
          src="/pagesPoster/static/leafLet/bg-02.png"
          mode=""
          class="w-100px h-77px absolute right-0px"
        >
        </image>
      </view>
      <view
        class="h-150px px-10px flex flex-x-between flex-y-center bg-white rounded-20px text-24px"
      >
        <view class="flex flex-y-center">
          <image
            src="/pagesPoster/static/leafLet/icon-03.png"
            mode=""
            class="w-100px h-100px"
          ></image>
          <view class="ml-10px flex flex-y">
            <text class="text-30px">推单奖励</text>
            <text class="color-999">推荐好友下单购买奖励</text>
          </view>
        </view>
        <view class="flex flex-y">
          <!-- <button open-type="share"
						class="shareBtn px-30px mb-5px bg-FF575C color-white rounded-30px">去推单</button> -->

          <text>抽奖次数+ {{ detailData.lotteryNum }}</text>
        </view>
      </view>
    </view>
    <!-- 省市区选择 province city area初始省市区设置 show:是否显示  @sureSelectArea：确认事件 @hideShow：隐藏事件-->
    <cc-select-city
      :province="state.province"
      :city="state.city"
      :area="state.area"
      :show="state.isShow"
      @changeClick="changeClick"
      @sureSelectArea="onsetCity"
      @hideShow="onhideShow"
    ></cc-select-city>
    <!-- <u-picker :show="state.isShow" ref="uPicker" :columns="state.columns" @confirm="onsetCity" @change="changeClick"></u-picker> -->
  </view>
</template>

<script setup name="Lottery">
import kongSwiper from "@/components/kong-swiper/kong-swiper.vue";
import ccSelectCity from "./cc-select-city/components/cc-select-city/cc-select-city.vue";
// 抽奖
import { reactive, ref, defineEmits, onMounted } from "vue";
import {
  postMenuApi,
  prizeListApi,
  lotteryApi,
  deliveryAddressApi,
} from "/http/index.js";
const props = defineProps({
  // 是否显示商户中心
  detailData: {
    default: {},
    type: Object,
  },
});
const emit = defineEmits(["openlogin", "onEndLottery"]);
const state = reactive({
  lotteryNum: uni.getStorageSync("lotteryNum"), //抽奖次数
  innerAudioContext: null, // 音效对象
  startStatus: false, // 开始抽奖
  endNumber: "", // 中奖礼品下标
  endStatus: false, // 结束旋转动画
  bdStyle: "", // 抽奖框外框动画class
  order: [0, 1, 2, 5, 4, 7, 6, 3], // 抽奖旋转顺序(prize的下标)
  activeIndex: 0, // 抽奖当选中(order的下标)
  // 奖品数组
  prizes: [
    // {
    // 	label: '大力摩托',
    // 	active: false,
    // 	isEntity: 'actual',
    // 	icon: '../static/leafLet/1.png'
    // },
    // {
    // 	label: '智能滑板',
    // 	active: false,
    // 	isEntity: 'actual',
    // 	icon: '../static/leafLet/2.png'
    // },
  ],
  popupState: 0, // 控制 活动规则、奖品列表 弹窗

  winningType: 1, //中奖类型 是实物(1)还是 虚拟(0)
  // 收件信息
  userName: "",
  phone: "",
  address: "",
  moreAddress: "", // 省市区
  province: "",
  city: "",
  area: "",
  isShow: false,
});

// 生成一个长度为n的乱序数组
function generateShuffledArray(n) {
  let array = Array.from(
    {
      length: n,
    },
    (_, index) => index
  );

  for (let i = n - 1; i > 0; i--) {
    const j = Math.floor(Math.random() * (i + 1));
    [array[i], array[j]] = [array[j], array[i]];
  }

  return array;
}

// 获取奖品列表
// prizeListApi('prize').then(res => {
const getPrizeList = () => {
  prizeListApi({
    pageSize: 100,
  })
    .then((res) => {
      console.log("获取奖品列表");
      res.items.map((item) => {
        item.active = false;
        item.label = item.name;
        item.icon = item.photo;
        item.alertPhoto = item.prizePhoto;
        return item;
      });
      state.order = generateShuffledArray(res.items.length);
      state.prizes = res.items;
    })
    .catch((err) => {
      console.log(err);
    });
};

getPrizeList();

defineExpose({
  getPrizeList,
});

const modalNoNum = ref(); // 没有次数提示
const longpress = () => {
  uni.downloadFile({
    url: "https://e.zgxhcs.net/images/cash.gif",
    success: (downloadResult) => {
      console.log("下载成功", downloadResult.tempFilePath);
      uni.saveImageToPhotosAlbum({
        filePath: downloadResult.tempFilePath,
        success: function (res) {
          uni.showToast({
            title: "保存相册成功",
          });
          console.log("save success");
        },
        fail(res) {
          console.log(res);
          if (res.errMsg == "saveImageToPhotosAlbum:fail auth deny") {
            uni.showModal({
              title: "您需要授权相册权限",
              success(res) {
                if (res.confirm) {
                  uni.openSetting({
                    success(res) {},
                    fail(res) {
                      console.log(res);
                    },
                  });
                }
              },
            });
          }
        },
      });
    },
    fail: (err) => {
      console.log("下载失败", err);
    },
  });
};

// 开始抽奖
const winningPopup = ref(); // 中奖状态弹窗
const jpId = ref(); // 调用接口获取奖品id
const start = () => {
  state.lotteryNum = uni.getStorageSync("lotteryNum");
  if (state.lotteryNum == 0) {
    uni.showToast({
      icon: "none",
      duration: 2500,
      title: "您没有可用抽奖次数",
    });
    return;
  }
  let AlertLogin = uni.getStorageSync("AlertLogin");
  if (!AlertLogin) {
    emit("openlogin");
    return;
  }

  // 计算礼品最大下标
  let count = state.prizes.length - 1;
  console.log(state.lotteryNum);
  if (state.lotteryNum !== 0 && !state.startStatus) {
    // 播放音效
    // music();
    // 复原选中状态
    state.prizes[state.order[state.activeIndex]].active = false;
    // 复原选中下标
    // state.activeIndex = 0;
    // 复原旋转状态
    state.endStatus = false;
    // 开启抽奖状态,避免暴击
    state.startStatus = true;
    // 开启闪烁动画
    state.bdStyle = "bdStyle";
    // 禁止滚动页面
    emit("onPageScroll", {
      show: true,
    });

    let timer = setInterval(function () {
      console.log(state.activeIndex, state.order[state.activeIndex]);
      state.prizes[state.order[state.activeIndex]].active = true;
      setTimeout(function () {
        if (state.endStatus && state.endNumber == state.activeIndex) {
          // 抽奖结束
          // 关闭音效
          // state.innerAudioContext.pause()
          // 清除边框闪烁动画
          state.bdStyle = "";
          // 关闭抽奖状态
          state.startStatus = false;
          // 清除抽奖动画定时器
          clearInterval(timer);

          state.winningType = state.prizes[state.activeIndex].isEntity; //设置中奖类型
          winningPopup.value.open(); // 打开中奖状态弹窗
          // uni.showToast({
          // 	icon: 'none',
          // 	duration: 2500,
          // 	title: '恭喜您获得' + state.prizes[state.activeIndex].name
          // })
        } else {
          state.prizes[state.order[state.activeIndex]].active = false;
          state.activeIndex++;
          if (state.activeIndex > count) state.activeIndex = 0;
        }
      }, 600);
    }, 500);

    // 请求后端,获取中奖礼品
    setTimeout(() => {
      // lotteryApi('3FA85F64-5717-4562-B3FC-2C963F66AFA6').then(res => {
      lotteryApi(
        uni.getStorageSync("id") || "662929ff-55a2-bb18-0099-633b0ced6bd1"
      )
        .then((res) => {
          if (state.prizes.find((item) => item.id == res.prizeId)) {
            end(state.prizes.findIndex((item) => item.id == res.prizeId));
            jpId.value = res.id; // 中奖id

            emit("onEndLottery"); // 通知活动页面 结束抽奖
            // end(0)
            if (state.endStatus && state.lotteryNum > 0) {
              state.lotteryNum--; // 次数--
            }
          } else {
            state.endStatus = true;
            uni.showToast({
              icon: "none",
              duration: 2500,
              title: "非常遗憾，未抽中",
            });
            // 开启滚动页面
            emit("onPageScroll", {
              show: false,
            });
          }
        })
        .catch((error) => {
          const message = error.rawData.error.message || "您没有可用抽奖次数";
          state.endStatus = true;
          state.startStatus = false;
          state.endNumber = -1;
          clearInterval(timer);
          uni.showToast({
            icon: "none",
            duration: 2500,
            title: message,
          });
          // 开启滚动页面
          emit("onPageScroll", {
            show: false,
          });
        });
    }, 8000);
  } else if (state.lotteryNum === 0) {
    modalNoNum.value.open();
  }
};
// 结束抽奖
const end = (prizeId) => {
  state.endNumber = prizeId; //从后端获取中奖值
  state.endStatus = true;
};

// 关闭中奖状态
const closeWinningHandle = () => {
  winningPopup.value.close();
  // 开启滚动页面
  emit("onPageScroll", {
    show: false,
  });
};

// 提交收件信息
const notify = ref();
const submitReceiving = () => {
  if (!state.userName) {
    notify.value.show({
      type: "error",
      message: "请输入姓名",
      safeAreaInsetTop: true,
    });
    return;
  }
  if (!state.phone) {
    notify.value.show({
      type: "error",
      message: "请输入电话号码",
      safeAreaInsetTop: true,
    });

    console.log(uni.$uv.test.mobile(state.phone));
    return;
  }
  if (!state.moreAddress) {
    notify.value.show({
      type: "error",
      message: "请选择地区",
      safeAreaInsetTop: true,
    });
    return;
  }
  if (!state.address) {
    notify.value.show({
      type: "error",
      message: "请输入收件地址",
      safeAreaInsetTop: true,
    });
    return;
  }
  console.log("提交接口", state.prizes[state.endNumber]);
  const currentPrize = state.prizes[state.endNumber];
  uni.showModal({
    title: "提示",
    content: "请确认收货信息，以便收到奖品",
    success: function (res) {
      if (res.confirm) {
        deliveryAddressApi({
          // PrizeId: currentPrize.value, // 奖品编码
          // PrizeName: currentPrize.label, //奖品名称
          // // UserId: '', //当前用户id
          // UserName: state.userName, //收件人
          // UserPhone: state.phone, //收件人联系方式
          // UserAddress: state.address, //收件地址
          id: jpId.value, // 奖品编码
          userName: state.userName, //收件人
          userPhone: state.phone, //收件人联系方式
          userAddress: state.moreAddress + state.address, //收件地址
        }).then((res) => {
          uni.showToast({
            icon: "none",
            duration: 2500,
            title: "请注意查收物流信息，耐心等待收货",
          });
          closeWinningHandle();
        });
      } else if (res.cancel) {
        console.log("用户点击取消");
        closeWinningHandle();
      }
    },
  });
};

const jpListPopup = ref();
// 打开奖品列表
const showListHandle = (index) => {
  jpListPopup.value.open();
  state.popupState = index;
};

// 关闭奖品列表
const closeListHandle = () => {
  jpListPopup.value.close();
};
const openPicker = () => {
  state.isShow = true;
};
const onhideShow = () => {
  state.isShow = false;
};

const changeClick = (value, value2, value3) => {
  state.province = value;
  state.city = value2;
  state.area = value3;
};
//选中省市区
const onsetCity = (e) => {
  let data = e.detail.target.dataset;
  let address = data.province + data.city + data.area;
  state.isShow = false;
  state.moreAddress = address;
};
</script>

<style lang="scss">
.lottery {
  // background: url(./../static/leafLet/bg.png) center -940rpx no-repeat;
  // background: url(https://i.postimg.cc/tTnGXD2v/bg.png) center -940rpx no-repeat;
}

.lotteryBg {
  border-radius: 30rpx;
  overflow: hidden;
}

.wrap {
  // background: url(./../static/leafLet/wrap.png) center no-repeat;
  // background: url(https://i.postimg.cc/TPGK5LZc/wrap.png) center no-repeat;
  background-size: contain;
}

.animateBg {
  // background: rgba(0, 0, 0, 0.5);

  .start {
    // background: url(./../static/leafLet/jstar-map.png);
    animation: hiddenMove 1s ease-in-out infinite forwards;
  }

  .start1 {
    left: 40rpx;
    // background-position: -52rpx -108rpx;
  }

  .start2 {
    left: 600rpx;
    top: 100rpx;
    // background-position: -81px -81px;
    animation-delay: 0.3s;
  }

  .start3 {
    left: 300px;
    top: 350px;
    // background-position: -27px -54px;
    animation-delay: 0.5s;
  }

  .start4 {
    left: 45px;
    top: 290px;
    // background-position: -27px -54px;
    animation-delay: 1.3s;
  }

  .start5 {
    left: 340px;
    top: 250px;
    // background-position: -27px -54px;
    animation-delay: 1.1s;
  }
}

@keyframes hiddenMove {
  0% {
    transform: none;
  }

  25% {
    transform: rotate(-5deg) scale(0);
  }

  50% {
    transform: rotate(-0deg) scale(0.8);
  }

  100% {
    transform: none;
  }
}

.luckyGrid-box {
  border: 10px solid #55007f;
  background-color: #ddd6f3;
  border-radius: 50rpx;
  // display: flex;
  // flex-wrap: wrap;
  // justify-content: space-between;
  // align-items: center;

  .item {
    border-radius: 20rpx;

    .img {
    }
  }
}

.bdStyle {
  animation: bd 0.6s infinite;
}

@keyframes bd {
  0% {
    border: 10px solid #ff3cac;
  }

  50% {
    border: 10px solid #784ba0;
  }

  100% {
    border: 10px solid #2b86c5;
  }
}

// 奖品列表弹窗
.jpListPopup {
  .title {
    top: 10px;
    z-index: -1;
    left: calc(50% - 100rpx);
    transform: rotate(-40deg);
    // background: url(../static/leafLet/bg-03.png) no-repeat;
    // background-size: contain;
  }

  .content {
    width: 80%;
    background: #fceef2;
  }

  .close {
    bottom: 0;
  }
}

// 中奖状态弹窗
.winningPopup {
  .title {
    top: 30px;
    left: calc(50% - 190rpx);
  }

  .content {
    width: 80%;
    background: #fceef2;
  }

  .close {
    bottom: 0;
  }

  .winningBtn {
    background: linear-gradient(180deg, #762ee4, #5c21ea);
  }
}

:deep(.uv-popup .uv-popup__content__close--bottom-left) {
  padding: 5px;
  left: calc(50% - 20px);
  border: 1px solid #fff;
  border-radius: 50px;
}

.uv-popup .uv-popup__content__close--bottom-left {
  padding: 5px;
  left: calc(50% - 20px);
  border: 1px solid #fff;
  border-radius: 50px;
}

.recommend {
  background: #fecd8a;
  background: linear-gradient(140deg, #fecd8a, #fceef2);

  .shareBtn {
    height: 60rpx;
    line-height: 60rpx;
    font-size: 28rpx;
  }
}

.bg-FF575C {
  background: #ff575c;
}

.color-999 {
  color: #999;
}

.border {
  border: 1px solid #e8dad2;
}
</style>
